import { memo, useMemo, useState, type FC } from "react"



const Memo: FC = () => {
  const [age, setAge] = useState(0)

  const handleAgeAdd = () => setAge(age + 1)

  const accumulatedValue = (num: number) => {
    let sum = 0
    for (let i = 1; i <= num; i++) {
      sum += i
    }
    return sum
  }

  const totalCounts = useMemo(() => {
    return accumulatedValue(age)
  }, [age])

  return (
    <div>
      <h1>useMemo案例</h1>
      <h1>当前年龄： {age}</h1>
      <h1>等差求和： { totalCounts }</h1>
      <button onClick={handleAgeAdd}>点我年龄加一</button>
    </div>
  )
}

export default memo(Memo)
